<template>
	<view class="search">
		<!-- 搜索结构 -->
		<search-com @myconfirm="toSearchList" @modifykey="modifykey" :kkey="key"></search-com>
		<view class="tip">
			<view @click="goSearchList(item1.trantip)" class="tip-item" v-for="(item1,index1) in tipList" :key="index1">
				<rich-text :nodes="item1.showtip"></rich-text>
			</view>
		</view>
		<view class="history">
			<view class="top">
				<view class="text">
					历史搜索
				</view>
				<icon @click="clearhistory" type="clear" size="16"></icon>
			</view>
			<view class="bottom">
				<text v-for="(item,index) in historyList" :key="index">{{item}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	var timer = null
	import SearchCom from '../../components/SearchCom.vue'
	import fangdou from '../../utils/myfangdou.js'
	export default {
		components:{
			SearchCom
		},
		data(){
			return {
				key:'',
				historyList:[],
				tipList:[]
			}
		},
		onLoad() {
			this.historyList = uni.getStorageSync('history') || []
		},
		methods:{
			goSearchList(str){
				this.key = str
				this.toSearchList()
			},
			toSearchList(){
				this.tipList = this.tipList
				this.$nextTick(()=>{
					this.tipList = []
				})
				if(this.key != ''){
					this.historyList.unshift(this.key)
					this.historyList = [...new Set(this.historyList)]
					if(this.historyList.length > 5){
						this.historyList.splice(5)
					}
					uni.setStorageSync('history',this.historyList)
				}
				uni.navigateTo({
					url:'/pages/searchList/searchList?key=' + this.key
				})
			},
			modifykey(str){
				this.key = str
				// clearTimeout(timer)
				// timer = setTimeout(()=>{
				// 	this.gettipList()
				// },1000)
				fangdou(()=>{
					this.gettipList()
				},500)()
			},
			async gettipList(){
				const res = await this.$http({
					url:'/goods/search?query='+ this.key + '&pagenum=1&pagesize=5'
				})
				console.log(res)
				this.tipList = res.goods.map(item=>{
					return {
						trantip:item.goods_name,
						showtip:'<div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">' + item.goods_name.replace(this.key,'<span style="color:red">' + this.key + '</span>') + '</div>'
					}
				})
			},
			clearhistory(){
				uni.clearStorage()
				this.historyList = []
			}
		}
	}
</script>

<style lang="less">
	.search{
		position: relative;
		.tip{
			position: absolute;
			width: 100%;
			line-height: 50rpx;
			left: 0;
			top: 100rpx;
			padding: 0 16rpx;
			box-sizing: border-box;
			background-color: #eee;
			font-size: 12px;
			.tip-item{
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
		.history{
			padding: 0 16rpx;
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 88rpx;
				.text{
					font-size: 18px;
				}
			}
			.bottom{
				display: flex;
				flex-wrap: wrap;
				text{
					padding: 15rpx 20rpx;
					max-width: 350rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					background-color: #ddd;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>
